<!-- vue-cropper.vue 2023/4/12 @wanghaoran -->
<template>
  <div>
    vue-cropper一个优雅的图片裁剪插件
    <div class="cut">
      <vue-cropper ref="cropper" :img="option.img" :output-size="option.size" :output-type="option.outputType"
                   :info="true" :full="option.full" :fixed="fixed" :fixed-number="fixedNumber"
                   :can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox"
                   :original="option.original"
                   :auto-crop="option.autoCrop" :auto-crop-width="option.autoCropWidth"
                   :auto-crop-height="option.autoCropHeight" :center-box="option.centerBox"
                   @real-time="realTime" :high="option.high"
                   @img-load="imgLoad" mode="contain" :max-img-size="option.max" @crop-moving="cropMoving"
                   ></vue-cropper>
    </div>

  </div>
</template>

<script setup>

import 'vue-cropper/dist/index.css'
import {VueCropper} from "vue-cropper";
import {ref} from "vue";

const option = ref({
  img: 'https://avatars2.githubusercontent.com/u/15681693?s=460&v=4',
  size: 1,
  full: false,
  outputType: 'png',
  canMove: true,
  fixedBox: false,
  original: false,
  canMoveBox: true,
  autoCrop: true,
  // 只有自动截图开启 宽度高度才生效
  autoCropWidth: 750,
  autoCropHeight: 340,
  centerBox: true,
  high: true,
  max: 99999,
})
const fixed = ref(false)
const fixedNumber = ref([75, 34])

// 实时预览函数
function realTime(data) {
  // this.previews = data;
  console.log(data);
}

function imgLoad(msg) {
  console.log(msg);
}

function cropMoving(data) {
  console.log(data, "截图框当前坐标");
}
</script>

<style scoped>
.cut {
  width: 500px;
  height: 500px;
  margin: 30px auto;
}
</style>
